<template>
  <div class="login-root">
    <a-col class="login-form" :xs="15" :sm="15" :md="10" :lg="7">
      <a-form :model="loginForm" @finish="loginFormSubmat" ref="formRef">
        <a-form-item>
          <div class="login-parant">
            <img class="logo" src="@/assets/images/logo.png" />
          </div>
          <div class="head">Smile Web</div>
          <div class="desc">
            不 为 模 糊 不 清 的 未 来 担 忧，只 为 清 清 楚 楚 的 现 在 努 力。
          </div>
        </a-form-item>
        <a-form-item
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ]"
          name="username"
        >
          <a-input
            placeholder="账 户 : admin"
            type="text"
            v-model:value="loginForm.username"
            size="large"
          >
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          :rules="[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: checkValidator, trigger: 'change' },
          ]"
          name="password"
        >
          <a-input-password
            placeholder="密 码 : 123456"
            v-model:value="loginForm.password"
            size="large"
            autocomplete="on"
          >
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-row>
          <a-col :span="15">
            <a-form-item
              :rules="[
                { required: true, message: '请输入验证码', trigger: 'blur' },
              ]"
              name="code"
            >
              <a-input
                placeholder="验证码"
                v-model:value="loginForm.code"
                size="large"
              >
                <template #prefix>
                  <SafetyOutlined />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" :offset="1">
            <img class="image-code" :src="codeImageBase64" @click="getCode" />
          </a-col>
        </a-row>
        <a-form-item>
          <a-checkbox v-model:checked="isRememberMe"> 记住我 </a-checkbox>
          <a class="forgot" href=""> 忘记密码 </a>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button type="primary" html-type="submit"> 登录 </a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </div>
</template>
<script lang="ts" setup>
import { ResultVo } from "@/utils/axios/types/axios-config";
import { LoginCaptchaCode, LoginFormItf } from "@/types/Login";
import { requestGet, requestGetMsg, requestPostMsg } from "@/utils/request";
import { Rule } from "ant-design-vue/es/form";
import { useLoginInfoStore } from "@/store";
import type { FormInstance } from "ant-design-vue";

const loginInfoStore = useLoginInfoStore();
// 表单dom
const formRef = ref<FormInstance>();
// 登录表单
const loginForm: LoginFormItf = reactive({
  username: "",
  password: "",
  code: "",
  uuid: "",
});
// 是否记住我
const isRememberMe = ref<boolean>(false);
// base64格式验证码
const codeImageBase64 = ref<string>();

// 获取验证码
const getCode = () => {
  requestGet("/captchaCode.json", { isToken: false }).then(
    (res: ResultVo<LoginCaptchaCode>) => {
      console.log(res);
      if (res.code == 2000) {
        codeImageBase64.value = res.data.base64;
        loginForm.uuid = res.data.uuid;
      } else {
        codeImageBase64.value = "";
        loginForm.uuid = "";
      }
    }
  );
};
onMounted(() => {
  getCode();
});

// 自定义验证规则
const checkValidator: any = (
  _rule: Rule,
  _value: string,
  _callback: Function
) => {
  if (!_value) {
    return _callback();
  }
  if (
    _value &&
    !/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/.test(
      _value
    )
  ) {
    _callback(
      new Error(
        "密码为数字,小写字母,大写字母,特殊符号;至少包含三种,长度为8-16位"
      )
    );
  }
  _callback();
};

const getUserInfo = () => {};

const loginFormSubmat = () => {
  requestPostMsg("/rs/login", loginForm, {
    isLodding: true,
    isToken: true,
  }).then((res) => {
    loginInfoStore.setToken(res.data.token || loginInfoStore.getToken);

    formRef.value?.resetFields();
  });
};
</script>
<style lang="scss" scoped>
.login-root {
  height: 100%;
  width: 100%;
  background-size: cover;
  background: url(@/assets/images/img/background.svg);
  .login-form {
    margin: auto;
    min-height: 20px;
    padding-top: 150px;
    .login-parant {
      width: 100%;
      text-align: center;
      .logo {
        width: 95px;
        border: none;
        background-color: transparent;
      }
    }
    .image-code {
      width: 130px;
      height: 40px;
    }

    .head {
      text-align: center;
      font-size: 20px;
    }
    .desc {
      width: 100%;
      text-align: center;
      color: gray;
      height: 60px;
    }

    .ant-input {
      border-radius: 4px;
      line-height: 42px;
      height: 42px;
    }
    .ant-btn {
      width: 100%;
      height: 42px;
      border-radius: 10px;
    }
    .forgot {
      float: right;
    }
  }
}
</style>
